<style lang="scss">
  .work-report {
    .el-main {
      padding: 16px 16px 0px 16px;
      // 搜索条件
      .search-box {
        background: #e5f1fb;
        border-left: 4px solid #2387e2;
        padding-left: 10px;
        position: relative;
        .is-active {
          .el-radio-button__inner {
            background-color: #409eff;
            border-color: #409eff;
          }
        }
        .search-my {
          float: left;
        }
        .search-month {
          float: left;
          margin: 0 12px;
          .el-range__close-icon {
            display: none;
          }
        }
      }
      // 卡片盒子
      .box-card {
        margin: 20px 0;
      }
      // 处室办理量统计
      .dept-number-div {
        width: 100%;
        .number-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 回复天数
      .dept-reply-div {
        width: 100%;
        .reply-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 处室满意率统计
      .dept-satisfy-div {
        width: 100%;
        .satisfy-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 处室延期率统计
      .dept-redly-div {
        width: 100%;
        .redly-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 退回统计
      .back-div {
        width: 100%;
        .back-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 处室本月与上月比较统计
      .dept-compare-div {
        width: 100%;
        .compare-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 月度统计
      .dept-month-div {
        width: 100%;
        .month-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 分类统计
      .category-div {
        width: 100%;
        .category-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
      // 不满意件分类统计
      .unsatisfy-category-div {
        width: 100%;
        .unsatisfy-data {
          text-align: center;
          width: 100%;
          height: 500px;
          padding-top: 20px;
        }
      }
    }
    .restme {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
</style>

<template>
  <el-container class="work-report">
    <!-- 主要区域容器 -->
    <el-main>
      <!-- 搜索条件 -->
      <div class="search-box">
        <div class="search-my">
          <el-radio-group v-model="monthItem"
                          size="small"
                          @change="monthItemChange">
            <el-radio-button label="1">本月</el-radio-button>
            <el-radio-button label="2">上月</el-radio-button>
            <el-radio-button label="3">本年</el-radio-button>
            <el-radio-button label="4">去年</el-radio-button>
          </el-radio-group>
        </div>
        <div class="search-month">
          <span class="demonstration">自定义：</span>
          <el-date-picker v-model="monthValue"
                          type="monthrange"
                          align="right"
                          unlink-panels
                          size="small"
                          range-separator="至"
                          start-placeholder="开始月份"
                          end-placeholder="结束月份"
                          value-format="yyyy-MM"
                          :picker-options="pickerOptions"
                          @change="monthValueChange"></el-date-picker>
        </div>
        <el-button class="search-reset restme"
                   type="info"
                   plain
                   size="small"
                   @click="doSatisfyReset"
                   icon="el-icon-refresh">重置</el-button>
      </div>

      <!-- 处室办理量 -->
      <!-- <el-card class="box-card">
        <div class="dept-number-div">
          <div class="number-data"
               id="deptNumberChartDiv"
               ref="deptNumberChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card> -->

      <!-- 处室回复天数统计 -->
      <el-card class="box-card">
        <div class="dept-reply-div">
          <div class="reply-data"
               id="deptReplyChartDiv"
               ref="deptReplyChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card>

      <!-- 处室满意率统计 -->
      <el-card class="box-card">
        <div class="dept-satisfy-div">
          <div class="satisfy-data"
               id="deptSatisfyChartDiv"
               ref="deptSatisfyChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card>

      <!-- 处室延期统计 -->
      <!-- <el-card class="box-card">
        <div class="dept-redly-div">
          <div class="redly-data"
               id="deptRedlyChartDiv"
               ref="deptRedlyChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card> -->

      <!-- 全局退回件率统计 -->
      <el-card class="box-card">
        <allBack :dateItem="monthItem"
                 :dateList="monthValue" />
      </el-card>
      <el-card class="box-card">
        <depBackType :dateItem="monthItem"
                     :dateList="monthValue" />
      </el-card>
      <!-- 各处室退回件统计 -->
      <el-card class="box-card">
        <depback :dateItem="monthItem"
                     :dateList="monthValue"/>
      </el-card>

      <!-- 处室本月与上月比较统计 -->
      <!-- <el-card class="box-card">
        <div class="dept-compare-div">
          处室月度对比
          <div class="compare-data"
               id="deptCompareChartDiv"
               ref="deptCompareChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card> -->

      <!-- 各月度数量统计 -->
      <el-card class="box-card">
        <div class="dept-month-div">
          <div class="month-data"
               id="monthChartDiv"
               ref="monthChartDiv"
               v-loading="loadingCharts"></div>
        </div>
      </el-card>

      <!-- 分类统计 -->
      <el-card class="box-card">
        <contType :dateItem="monthItem"
                  :dateList="monthValue" />
        <!-- <div class="category-div">
          <div class="category-data"
               id="deptCategoryChartDiv"
               ref="deptCategoryChartDiv"
               v-loading="loadingCharts"></div>
        </div> -->
      </el-card>

      <!-- 不满意件分类统计 -->
      <el-card class="box-card">
        <dissatisfied :dateItem="monthItem"
                      :dateList="monthValue" />
        <!-- <div class="unsatisfy-category-div">
          <div class="unsatisfy-data"
               id="deptBumanyijianChartDiv"
               ref="deptBumanyijianChartDiv"
               v-loading="loadingCharts"></div> -->
        <!-- </div> -->
      </el-card>

      <!-- 不满意件分类统计 -->
      <el-card class="box-card">
        <topFive :dateItem="monthItem"
                 :dateList="monthValue" />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
  //  后面增加两个统计图
  import depback from './components/depback'  //各处室退回件率统计
  import allBack from './components/allBack'  //全局退回件率统计
  import depBackType from './components/depBackType'  //全局退回件率统计
  import contType from './components/contType'  //分类统计统计
  import dissatisfied from './components/dissatisfied'  //不满意
  import topFive from './components/topFive'  //不满意
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  let echarts = require('echarts/lib/echarts')

  export default {
    components: {
      depback, allBack, depBackType, contType, dissatisfied, topFive
    },
    data () {
      return {
        // 处室查询条件
        countPojo: {
          dateList: '',
          dateItem: '',
          dateType: 'i'
        },
        deptListData: [],
        // 日期快速选择
        pickerOptions: {
          shortcuts: [
            {
              text: '今年至今',
              onClick (picker) {
                const end = new Date()
                const start = new Date(new Date().getFullYear(), 0)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近三个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setMonth(start.getMonth() - 3)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近六个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setMonth(start.getMonth() - 6)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        loadingCharts: false,
        monthItem: '3',
        monthValue: [],
        // 处室统计数据
        deptSatisfyData: {},
        deptBumanyijianData: {},
        deptDelayData: {},
        deptReplyData: {},
        deptMonthData: {},
        deptCategoryData: {}
      }
    },
    watch: {
      // monthItem: {
      //   handler (newValue, oldValue) {
      //     console.log(newValue, 'newValue')
      //     console.log(newValue, 'oldValue')
      //   },
      //   immediate: true,
      //   deep: true
      // },
      // monthValue: {
      //   handler (newValue, oldValue) {
      //     console.log(newValue, 'newValue11')
      //     console.log(newValue, 'oldValue11')
      //   },
      //   immediate: true,
      //   deep: true
      // }
    },
    methods: {
      // 进入页面执行方法
      initLoadingFn () {
        // 处室办理量统计
        this.getDeptHandleCountCharts()
        // 处室回复天数统计
        this.getDeptReplyDayCharts()
        // 处室满意率统计
        this.getDeptSatisfyCharts()
        // 处室延期吕统计
        // this.getDeptDelayCharts()
        // 处室退回件统计
        this.getDeptBackCharts()
        // 处室本月与上月比较统计
        // this.getDeptMonthCompareCharts()
        // 各月度数量统计
        this.getDeptMonthCharts()
        // 分类统计
        this.getDeptCategoryCharts()
        // 处室不满意件分类统计
        this.getDeptBumanyijianCharts()
      },
      // 年月日item改变
      monthItemChange () {
        this.monthValue = []

        this.countPojo.dateType = 'i'
        this.initLoadingFn()
      },
      monthValueChange () {
        this.monthItem = ''
        this.countPojo.dateType = 'd'
        this.initLoadingFn()
      },
      // 满意率条件重置
      doSatisfyReset () {
        this.monthItem = '3'
        this.monthValue = ''
        this.countPojo.dateType = 'i'
        this.initLoadingFn()
      },
      // 处室办理量统计
      getDeptHandleCountCharts () {

      },
      // 处室回复天数统计
      getDeptReplyDayCharts () {
        const _this = this
        _this.countPojo.dateList = _this.monthValue
        _this.countPojo.dateItem = _this.monthItem
        // console.log(_this.countPojo);
        _this.loadingCharts = true
        _this.$axios
          .post(_this.$api.countCharts.deptHandleDaysCharts, _this.countPojo)
          .then(rs => {
            // if (rs) {
            _this.deptReplyData = rs
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptReplyChartDiv)
            if (!myChart) return
            let i = 0
            let colorsList = [
              '#d01111',
              '#e3315b',
              '#d8155f',
              '#d53082',
              '#d71bde',
              '#b036e3',
              '#7e30ff',
              '#4d30ff',
              "#6d66ff",
              "#5599ec",
              "#55c0ec"
            ]
            colorsList = colorsList.reverse()
            // 绘制图表
            myChart.clear()
            myChart.setOption({
              title: {
                text: '处室处理时效统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : {c} ',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '20%',
                right: '25%',
                top: '80px',
                bottom: '50px',
                containLabel: false
              },
              calculable: false,
              xAxis: [
                {
                  name: '处室',
                  type: 'category',
                  data:
                    undefined === rs ? [] : _this.deptReplyData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0,
                    rotate: 20,
                    clickable: false, // 可点击
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                    // rotate: 22,
                  },
                  // nameTextStyle: {
                  //   fontSize: 16,
                  //   fontFamily: 'Microsoft YaHei,微软雅黑'
                  // }
                }
              ],
              yAxis: [
                {
                  name: '处理时效（天）',
                  type: 'value',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                  },
                  // nameTextStyle: {
                  //   fontSize: 16,
                  //   fontFamily: 'Microsoft YaHei,微软雅黑'
                  // }
                }
              ],
              series: [
                {
                  data:
                    undefined === rs
                      ? []
                      : _this.deptReplyData.effictive.split(','),
                  name: '处理时效（天）',
                  type: 'bar',
                  barCategoryGap: '70%',
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 16, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      // 自定义颜色数组
                      color: function (val) {
                        if (0 < val.data && val.data < 1) {
                          return '#55c0ec'
                        }
                        else if (1 < val.data && val.data < 2) {
                          return '#6d66ff'
                        }
                        else if (2 < val.data && val.data < 3) {
                          return '#b036e3'
                        }
                        else if (3 < val.data && val.data < 4) {
                          return '#d53082'
                        }
                        else if (4 < val.data && val.data < 5) {
                          return '#d01111'
                        }
                        else if (5 < val.data) {
                          return '#c23531'
                        }
                        // console.log(val, 6666)
                        // return colorsList[i++]
                      },
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 18,// 让字体变大
                        color: '#000'
                      }
                    }
                  }
                }
              ]
            })
          })
      },
      // 处室满意率统计
      getDeptSatisfyCharts () {
        const _this = this
        _this.countPojo.dateList = _this.monthValue
        _this.countPojo.dateItem = _this.monthItem
        // console.log(_this.countPojo);
        _this.loadingCharts = true
        _this.$axios
          .post(
            _this.$api.countCharts.deptSatisfactionRateCharts,
            _this.countPojo
          )
          .then(rs => {
            // if (rs) {
            _this.deptSatisfyData = rs
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptSatisfyChartDiv)
            if (!myChart) return
            let i = 0
            let colorsList = [
              '#11bf15',
              '#4dd62d',
              '#97e730',
              '#c4eb0f',
              '#ebde0f',
              '#e9c311',
              '#e9a411',
              '#e48325',
              '#d66d17',
              '#f46043',
              '#ea1110',
            ].reverse()

            // 绘制图表
            myChart.clear()
            myChart.setOption({
              title: {
                text: '处室满意率统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : {c} ',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '20%',
                right: '25%',
                top: '80px',
                bottom: '50px',
                containLabel: false
              },
              calculable: false,
              xAxis: [
                {
                  name: '处室',
                  type: 'category',
                  data:
                    undefined === rs ? [] : _this.deptSatisfyData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0,
                    rotate: 20,
                    clickable: false, // 可点击
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                    // rotate: 22,
                  },
                  // nameTextStyle: {
                  //   fontSize: 16,
                  //   fontFamily: 'Microsoft YaHei,微软雅黑'
                  // }
                }
              ],
              yAxis: [
                {
                  name: '满意率（%）',
                  type: 'value',
                  max: 100,
                  min: 50,
                  splitNumber: 3,
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                  },
                  // nameTextStyle: {
                  //   fontSize: 16,
                  //   fontFamily: 'Microsoft YaHei,微软雅黑'
                  // }
                }
              ],
              series: [
                {
                  data:
                    undefined === rs
                      ? []
                      : _this.deptSatisfyData.satisfy.split(','),
                  name: '满意率（%）',
                  type: 'bar',
                  barCategoryGap: '70%',
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 16, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      // 自定义颜色数组
                      color: function (val) {
                        if (val.data == 100) {
                          return '#11bf15'
                        }
                        else if (val.data < 100 && val.data > 99) {
                          return '#4dd62d'
                        }
                        else if (val.data < 99 && val.data > 98) {
                          return '#c4eb0f'
                        }
                        else if (val.data < 98 && val.data > 97) {
                          return '#ebde0f'
                        }
                        else if (val.data < 97 && val.data > 96) {
                          return '#e9c311'
                        }
                        else if (val.data < 96 && val.data > 95) {
                          return '#e9a411'
                        }
                        else if (val.data < 95 && val.data > 94) {
                          return '#e48325'
                        }
                        else if (val.data < 94 && val.data > 93) {
                          return '#d66d17'
                        }
                        else if (val.data < 93 && val.data > 92) {
                          return '#f46043'
                        }
                        else if (val.data < 92 && val.data > 91) {
                          return '#f46043'
                        }
                        else if (val.data < 91 && val.data > 90) {
                          return '#f46043'
                        }
                        else if (val.data < 90) {
                          return '#ea1110'
                        }
                        // return colorsList[i++]
                      },
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 18,// 让字体变大
                        color: '#000'
                      }
                    }
                  }
                }
              ]
            })
          })
      },
      // 处室延期率统计
      // getDeptDelayCharts () {
      //   const _this = this
      //   _this.countPojo.dateList = _this.monthValue
      //   _this.countPojo.dateItem = _this.monthItem
      //   // console.log(_this.countPojo);
      //   _this.loadingCharts = true
      //   _this.$axios
      //     .post(_this.$api.countCharts.deptDelayRateCharts, _this.countPojo)
      //     .then(rs => {
      //       // if (rs) {
      //       // console.log(rs)
      //       _this.deptDelayData = rs
      //       _this.loadingCharts = false
      //       // 基于准备好的dom，初始化echarts实例
      //       let myChart = echarts.init(_this.$refs.deptDelayChartDiv)
      //       if (!myChart) return
      //       let i = 0
      //       let colorsList = [
      //         '#FC2D5E',
      //         '#FF5153',
      //         '#FF7149',
      //         '#FEB235',
      //         '#D2CC2D',
      //         '#B9D429',
      //         '#86E023',
      //         '#72E621'
      //       ]
      //       colorsList = colorsList.reverse()
      //       // 绘制图表
      //       myChart.clear()
      //       myChart.setOption({
      //         title: {
      //           text: '处室市长信箱延期率统计',
      //           x: 'center'
      //         },
      //         tooltip: {
      //           trigger: 'axis',
      //           formatter: '{a} <br/>{b} : {c} ',
      //           axisPointer: {
      //             // 坐标轴指示器，坐标轴触发有效
      //             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      //           }
      //         },
      //         grid: {
      //           left: '20%',
      //           right: '25%',
      //           top: '80px',
      //           bottom: '50px',
      //           containLabel: false
      //         },
      //         calculable: false,
      //         xAxis: [
      //           {
      //             name: '处室',
      //             type: 'category',
      //             data: undefined === rs ? [] : _this.deptDelayData.name,
      //             axisLabel: {
      //               // 调整x轴的lable
      //               interval: 0, // 全部显示
      //               clickable: false, // 可点击
      //               textStyle: {
      //                 fontSize: 16 // 让字体变大
      //               }
      //               // rotate: 22,
      //             },
      //             nameTextStyle: {
      //               fontSize: 16,
      //               fontFamily: 'Microsoft YaHei,微软雅黑'
      //             }
      //           }
      //         ],
      //         yAxis: [
      //           {
      //             name: '延期率（%）',
      //             type: 'value',
      //             scale: true,
      //             axisLabel: {
      //               // 调整y轴的lable
      //               textStyle: {
      //                 fontSize: 16 // 让字体变大
      //               }
      //             },
      //             nameTextStyle: {
      //               fontSize: 16,
      //               fontFamily: 'Microsoft YaHei,微软雅黑'
      //             }
      //           }
      //         ],
      //         series: [
      //           {
      //             data: undefined === rs ? [] : _this.deptDelayData.delay,
      //             name: '延期率（%）',
      //             type: 'line',
      //             // yAxisIndex: 1,
      //             smooth: true,
      //             showSymbol: true,
      //             symbol: 'circle', // 设定为实心点
      //             symbolSize: 16, // 设定实心点的大小
      //             itemStyle: {
      //               normal: {
      //                 // 自定义颜色数组
      //                 color: function () {
      //                   return colorsList[i++]
      //                 },
      //                 lineStyle: {
      //                   width: 2,
      //                   color: '#bbb',
      //                   type: 'dotted' // 'dotted'虚线 'solid'实线
      //                 },
      //                 label: {
      //                   show: true,
      //                   position: 'top',
      //                   fontSize: 18 // 让字体变大
      //                 }
      //               }
      //             }
      //           }
      //         ]
      //       })
      //     })
      // },
      // 处室退件统计
      getDeptBackCharts () {

      },
      // 处室月度办理量对比图
      getDeptMonthCompareCharts () {
        const _this = this
        _this.loadingCharts = false
        // 基于准备好的dom，初始化echarts实例
        // console.log('1111', echarts);
        // let myChart = echarts.init(this.$refs.deptCompareChartDiv)
        var MonthCompareChart = echarts.init(document.getElementById('deptCompareChartDiv'));
        // console.log('aaa', MonthCompareChart)
        // if (!myChart) return
        // // 绘制图表
        // myChart.clear()
        MonthCompareChart.setOption({
          title: {
            text: '各处室本月与上月办理量对比统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{a} <br/>{b} : {c} ',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '20%',
            right: '25%',
            top: '80px',
            bottom: '50px',
            containLabel: false
          },
          xAxis: [
            {
              name: '处室',
              type: 'category',
              data: ['chushi', 'xingqier', 'xingqisan'],
              boundaryGap: false,
              axisLabel: {
                // 调整x轴的lable
                interval: 0, // 全部显示
                clickable: false, // 可点击
                textStyle: {
                  fontSize: 16 // 让字体变大
                }
              },
              // offset: '-20px',
              nameTextStyle: {
                fontSize: 16,
                fontFamily: 'Microsoft YaHei,微软雅黑'
              }
            }
          ],
          yAxis: [
            {
              name: '处理件数（件）',
              type: 'value',
              axisLabel: {
                // 调整y轴的lable
                textStyle: {
                  fontSize: 16 // 让字体变大
                }
              },
              nameTextStyle: {
                fontSize: 16,
                fontFamily: 'Microsoft YaHei,微软雅黑'
              }
            }
          ],
          series: [
            {
              data: [12, 22, 44],
              name: '处理件数（件）',
              type: 'bar',
              barWidth: '50px',
              itemStyle: {
                normal: {
                  color: '#0061C5'
                }
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18 // 让字体变大
              },
            }
          ]
        })
      },
      // 年月度统计
      getDeptMonthCharts () {
        const _this = this
        _this.countPojo.dateList = _this.monthValue
        _this.countPojo.dateItem = _this.monthItem
        // console.log(_this.countPojo);
        _this.loadingCharts = true
        _this.$axios
          .post(_this.$api.countCharts.monthCharts, _this.countPojo)
          .then(rs => {
            // if (rs) {
            _this.deptMonthData = rs
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.monthChartDiv)
            if (!myChart) return
            let i = 0
            let colorsList = [
              '#FC2D5E',
              '#FF5153',
              '#FF7149',
              '#FEB235',
              '#D2CC2D',
              '#B9D429',
              '#86E023',
              '#72E621'
            ]
            // 绘制图表
            myChart.clear()
            myChart.setOption({
              title: {
                text: '全局本年月度工单处理量统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : {c} ',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '20%',
                right: '25%',
                top: '80px',
                bottom: '50px',
                containLabel: false
              },
              xAxis: [
                {
                  name: '月度',
                  type: 'category',
                  data:
                    undefined === rs ? [] : _this.deptMonthData.name.split(','),
                  // boundaryGap: false,
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                  },
                }
              ],
              yAxis: [
                {
                  name: '处理件数（件）',
                  type: 'value',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      // fontSize: 16 // 让字体变大
                    }
                  },
                  // nameTextStyle: {
                  //   fontSize: 16,
                  //   fontFamily: 'Microsoft YaHei,微软雅黑'
                  // }
                }
              ],
              series: [
                {
                  name: '已采纳',
                  type: 'line',
                  stack: '总量',
                  symbol: 'circle',
                  symbolSize: 8,
                  itemStyle: {
                    normal: {
                      color: '#0092f6',
                      lineStyle: {
                        color: "#0092f6",
                        width: 1
                      },
                    }
                  },
                  markPoint: {
                    itemStyle: {
                      normal: {
                        color: 'red'
                      }
                    }
                  },
                  label: {
                    show: true,
                    position: 'top',
                    fontSize: 14 // 让字体变大
                  },
                  data: undefined === rs ? [] : _this.deptMonthData.number.split(','),
                },
                // {
                //   data:
                //     undefined === rs ? [] : _this.deptMonthData.number.split(','),
                //   name: '处理件数（件）',
                //   type: 'line',
                //   smooth: true,
                //   stack: 'a',
                //   showSymbol: true,
                //   symbol: 'triangle', // 设定为实心点
                //   symbolSize: 16,
                //   symbolRotate: -0,
                //   sampling: 'average',
                //   itemStyle: {
                //     normal: {
                //       color: '#0061C5'
                //     }
                //   },
                //   label: {
                //     show: true,
                //     position: 'top',
                //     fontSize: 18 // 让字体变大
                //   },
                //   areaStyle: {
                //     normal: {
                //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //         {
                //           offset: 0,
                //           color: '#0061C5'
                //         },
                //         {
                //           offset: 1,
                //           color: '#d4eaff'
                //         }
                //       ])
                //     }
                //   }
                // }
              ]
            })
          })
      },
      // 分类统计
      getDeptCategoryCharts () {
        const _this = this
        _this.countPojo.dateList = _this.monthValue
        _this.countPojo.dateItem = _this.monthItem
        // console.log(_this.countPojo,9998);
        _this.loadingCharts = true
        _this.$axios
          .post(_this.$api.countCharts.contentCategoryCharts, _this.countPojo)
          .then(rs => {
            // if (rs) {
            _this.deptCategoryData = rs
            let categoryLegendData = _this.deptCategoryData.category.map(
              item => ({
                name: `${item.name}：${item.value}(件)`,
                value: item.value,
                percent: item.percent
              })
            )
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptCategoryChartDiv)
            if (!myChart) return
            let i = 0
            let colorsList = [
              '#D87A80',
              '#FFB980',
              '#E5CF0D',
              '#97B552',
              '#2EC7C9',
              '#5AB1EF',
              '#B6A2DE',
              '#AA8C8A'
            ]
            // 绘制图表
            myChart.clear()
            myChart.setOption({
              title: {
                text: '工单内容类别统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : {c} ',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                show: true,
                orient: 'vertical',
                x: '58%',
                align: 'left',
                y: '30%',
                selectedMode: false,
                textStyle: {
                  fontSize: 24
                },
                data: categoryLegendData.map(item => item.name)
              },
              grid: {
                left: '20%',
                right: '25%',
                top: '80px',
                bottom: '50px',
                containLabel: false
              },
              calculable: false,
              series: [
                {
                  data: categoryLegendData.map(item => item),
                  name: '类别（件）',
                  type: 'pie',
                  center: ['38%', '56%'],
                  itemStyle: {
                    normal: {
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      },
                      label: {
                        show: true,
                        position: 'inner',
                        color: '#000',
                        fontSize: 18, // 让字体变大
                        formatter: value => {
                          let { data } = value
                          let _name
                          for (const key in categoryLegendData) {
                            if (categoryLegendData.hasOwnProperty(key)) {
                              const element = categoryLegendData[key]
                              if (data.name === element.name) {
                                _name = `${element.value}(件)\n${element.percent}%`
                              }
                            }
                          }
                          return _name
                        }
                      }
                    }
                  }
                }
              ]
            })
          })
      },
      // 不满意件分类统计
      getDeptBumanyijianCharts () {
        const _this = this
        _this.countPojo.dateList = _this.monthValue
        _this.countPojo.dateItem = _this.monthItem
        // console.log(_this.countPojo,66666666666666);

        _this.loadingCharts = true
        _this.$axios
          .post(
            _this.$api.countCharts.satisfactionCategoryCharts,
            _this.countPojo
          )
          .then(rs => {
            // if (rs) {
            _this.deptBumanyijianData = rs
            let categoryLegendData = _this.deptBumanyijianData.category.map(
              item => ({
                name: `${item.name}：${item.value}(件)`,
                value: item.value,
                percent: item.percent
              })
            )
            _this.loadingCharts = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(_this.$refs.deptBumanyijianChartDiv)
            if (!myChart) return
            let i = 0
            let colorsList = [
              '#D87A80',
              '#FFB980',
              '#E5CF0D',
              '#97B552',
              '#2EC7C9',
              '#5AB1EF',
              '#B6A2DE',
              '#AA8C8A'
            ]
            // 绘制图表
            myChart.clear()
            myChart.setOption({
              title: {
                text: '不满意件类别统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b} : {c} ',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                show: true,
                orient: 'vertical',
                x: '58%',
                y: '30%',
                align: 'left',
                selectedMode: false,
                textStyle: {
                  fontSize: 24
                },
                data: categoryLegendData.map(item => `${item.name}`)
              },
              grid: {
                left: '20%',
                right: '25%',
                top: '80px',
                bottom: '50px',
                containLabel: false
              },
              calculable: false,
              series: [
                {
                  data: categoryLegendData.map(item => item),
                  name: '类别（件）',
                  type: 'pie',
                  center: ['38%', '56%'],
                  itemStyle: {
                    normal: {
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      },
                      label: {
                        show: true,
                        position: 'inner',
                        color: '#000',
                        fontSize: 18, // 让字体变大
                        formatter: value => {
                          let { data } = value
                          let _name
                          for (const key in categoryLegendData) {
                            if (categoryLegendData.hasOwnProperty(key)) {
                              const element = categoryLegendData[key]
                              if (data.name === element.name) {
                                _name = `${element.value}(件)\n${element.percent}%`
                              }
                            }
                          }
                          return _name
                        }
                      }
                    }
                  }
                }
              ]
            })
          })
      },
    },
    mounted: function () {

      this.$nextTick(() => {
        this.initLoadingFn()
      });
    }
  }
</script>
